<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-row :gutter="10">
                  <el-col :span="6">
                    <el-input
                        placeholder="按照用户id查找"
                        prefix-icon="el-icon-search"
                        v-model="id">
                    </el-input>
                  </el-col>
                  <el-col :span="12">
                    <el-button icon="el-icon-search" circle @click="getUserByName"></el-button>
                  </el-col>
                </el-row>


            </div>
                <el-table :data="userInfo"
                border 
                class="table"
                ref="tableRef"
                header-cell-class-name="table-header">
                <el-table-column prop="user_id" label="用户ID"></el-table-column>
                <el-table-column prop="college" label="学院"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="health" label="健康状况"></el-table-column>
                <el-table-column prop="temperature" label="体温"></el-table-column>
                <el-table-column prop="outside" label="是否外出"></el-table-column>
                <el-table-column prop="time" label="填报时间"></el-table-column>
                <el-table-column prop="work" label="工作状态"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
                </el-table>
        </div>
    </div>
</template>
<script>
import allPerson from '@/api/allPerson'
import moment from 'moment'
export default {
    name: 'allPerson',
    data() {
        return {
            id:'',
            userInfo:[]
        }
    },
    created() {
        this.getUserInfo();
    },
    methods: {
        getUserInfo() {
            allPerson.getUserInfo()
            .then(response=>{
                this.userInfo = response.data;
                var userInfoDetailList = [];
                if (this.userInfo){
                    this.userInfo.forEach(u=>{
                        var detail={
                            user_id:u.user_id,
                            college:u.college,
                            name:u.name,
                            health:u.health,
                            temperature:u.temperature,
                            outside:u.outside,
                            time:moment(u.time).format('YYYY年MM月DD日 HH:mm'),
                            work:u.work,
                            remark:u.remark
                        }
                    userInfoDetailList.push(detail);
                    })
                    this.userInfo=userInfoDetailList;
                }

            })
        },
        getUserByName() {
            if (this.id === '') {
                this.getUserInfo();
            } else {
                allPerson.getUserByName(this.id)
                .then(response=>{
                    this.userInfo = response.data;
                    var userInfoDetailList = [];
                    if (this.userInfo){
                        this.userInfo.forEach(u=>{
                            var detail={
                                user_id:u.user_id,
                                college:u.college,
                                name:u.name,
                                health:u.health,
                                temperature:u.temperature,
                                outside:u.outside,
                                time:moment(u.time).format('YYYY年MM月DD日 HH:mm'),
                                work:u.work,
                                remark:u.remark
                            }
                        userInfoDetailList.push(detail);
                        })
                        this.userInfo=userInfoDetailList;
                    }
                })
            }

        }
    }
}
</script>
<style scoped>
.handle-box{
    margin-bottom: 20px;
}
.table{
    width: 100%;
    font-size: 14px;
}
</style>